/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import styles from './tcconfig.module.css'
import ConditionInput from "@/pages/components/conditionInput/conditionInput";
import SubmitButton from "@/pages/components/submitButton/submitButton";
import Space from "@/pages/components/space/space";
import ConditionCountry from "@/pages/components/conditionCountry/conditionCountry";
import Card from "@/pages/components/card/card";
import FlexRow from "@/pages/components/flexLayout/flexRow";
import FlexRowItem from "@/pages/components/flexLayout/flexRowItem";
import FlexColumn from "@/pages/components/flexLayout/flexColumn";
import LineRow from "@/pages/components/line/lineRow";
import Paragraph from "@/pages/components/paragraph/paragraph";
import Title from "@/pages/components/paragraph/title";
import Text from "@/pages/components/paragraph/text";
import { getConfigsCache, setCache, getCountrysCache, setCountryCache } from "../viewmodel/configImpl";


export default function TcConfigLayout() {

    const [countryList, setCountryList] = useState(getCountrysCache())

    const [configList, setConfigList] = useState(getConfigsCache());

    useEffect(() => {

        return () => {
        }
    }, [])

    const onHandleInputChange = (label, text) => {
        setConfigList(prevList =>
            prevList.map(item =>
                item.label === label
                    ? { ...item, value: text }
                    : item
            )
        );
    }

    const onHandleInputSave = () => {
        for (let i = 0; i < configList.length; i++) {
            let item = configList[i];
            setCache(item.label, item.value);
        }
    }

    const onHandleInputClear = () => {
        setConfigList(prevList =>
            prevList.map(item => ({
                ...item,
                value: ""
            }))
        );
    }

    const onHandleCountryChange = (newItem) => {
        if (newItem && newItem.value.length > 0) {
            setCountryCache(newItem.value);
        }
        setCountryList(prevList =>
            prevList.map(item => ({
                ...item,
                checked: item === newItem
            }))
        );
    }

    return (
        <div className={styles.tcConfigRoot}>

            <Card title="设置查询参数" style={{ width: '100%' }}>
                {/* 条件列表 */}
                <FlexColumn>
                    <FlexRow>
                        <FlexRowItem flex={1}>
                            <ConditionCountry label="Country" values={countryList} onChange={onHandleCountryChange} />
                        </FlexRowItem>

                        <FlexRowItem flex={1} />

                        <FlexRowItem flex={1} />
                    </FlexRow>

                    <Space size="24px" />

                    <FlexRow>
                        <FlexRowItem flex={1}>
                            <ConditionInput label={configList[0].label} value={configList[0].value} hint={configList[0].hint} onChange={(text) => { onHandleInputChange(configList[0].label, text) }} />
                        </FlexRowItem>

                        <FlexRowItem flex={1}>
                            <ConditionInput label={configList[1].label} value={configList[1].value} hint={configList[1].hint} onChange={(text) => { onHandleInputChange(configList[1].label, text) }} />
                        </FlexRowItem>

                        <FlexRowItem flex={1}>
                            <ConditionInput label={configList[2].label} value={configList[2].value} hint={configList[2].hint} onChange={(text) => { onHandleInputChange(configList[2].label, text) }} />
                        </FlexRowItem>
                    </FlexRow>

                    <Space size="24px" />

                    <FlexRow>
                        <FlexRowItem flex={1}>
                            <ConditionInput label={configList[3].label} value={configList[3].value} hint={configList[3].hint} onChange={(text) => { onHandleInputChange(configList[3].label, text) }} />
                        </FlexRowItem>

                        <FlexRowItem flex={1}>
                            <ConditionInput label={configList[4].label} value={configList[4].value} hint={configList[4].hint} onChange={(text) => { onHandleInputChange(configList[4].label, text) }} />
                        </FlexRowItem>

                        <FlexRowItem flex={1}>
                            <ConditionInput label={configList[5].label} value={configList[5].value} hint={configList[5].hint} onChange={(text) => { onHandleInputChange(configList[5].label, text) }} />
                        </FlexRowItem>
                    </FlexRow>
                </FlexColumn>

                {/* 提交区域 */}
                <FlexRow style={{ marginTop: '32px', marginLeft: '2px' }}>
                    <SubmitButton label="保存" onClick={() => { onHandleInputSave() }} />
                    <Space />
                    <SubmitButton danger label="清空" onClick={() => { onHandleInputClear() }} />
                </FlexRow>

                <Space size="24px" />

                {/* 说明 Typography*/}
                <LineRow />
                <Space size="16px" />

                <Paragraph>
                    <Title>说明</Title>
                    <Text>填充所有查询条件后, 首次填充只需 Country / Product / Mobile, 点击 "保存", 所有表单页将会根据这些条件去自动匹配查询结果.</Text>
                </Paragraph>

            </Card >
        </div >
    )
}